<script setup  lang="ts">
import type { FormRules } from "element-plus"
import { loginApi } from "../login/apis"
import { getHistoryQuestionListApi } from "@/api"
import logoUrl0 from '@@/assets/images/layouts/logo.png';
import { useUserStore } from "@/pinia/stores/user.js"
import { onBeforeMount, onMounted, ref, unref } from "vue"
import {LoginRequestData} from "@/pages/login/apis/type";
import {removeToken} from "@@/utils/cache/cookies";
import Header from "@@/components/Head/index.vue"
const userStore = useUserStore()
const dialogVisible = ref(false)
const router = useRouter()
const token = ref("")
const questionList = ref([]) // 10条AI推荐列表数据
const username = ref("")
import aiYaoSuKa1 from '@@/assets/images/layouts/ai-word1.png';
import aiYaoSuKa11 from '@@/assets/images/layouts/ai-word11.png';
import aiYaoSuKa2 from '@@/assets/images/layouts/ai-word2.png';
import aiYaoSuKa21 from '@@/assets/images/layouts/ai-word21.png';
import aiYaoSuKa3 from '@@/assets/images/layouts/ai-word3.png';
import aiYaoSuKa31 from '@@/assets/images/layouts/ai-word31.png';
import fileUpload from '@@/assets/images/layouts/fileupload3.png';
const askContent = ref("")
/** 登录按钮 Loading */
const loading = ref(false)
function goToUrl (type) {
  router.push({
    path: type
  })
}
const loginFormRef = useTemplateRef("loginFormRef")
/** 登录表单数据 */
const loginFormData: LoginRequestData = reactive({
  username: "",
  account: "",
  password: "",
  mobile: "",
  code: ""
})
onBeforeMount(() => {
  username.value = userStore.getUserName().value
  token.value = userStore.token
  if (token.value === '') {
    dialogVisible.value = true
  }
  getHistoryQuestionList()
})
function handleLogin() {
  loginFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    loginFormData.username = loginFormData.account
    loginFormData.mobile = loginFormData.account
    loading.value = true
    loginApi(loginFormData).then(({ data }) => {
      userStore.setUsername(data.mobile) // token-admin
      userStore.setToken(data.token) // token-admin
      dialogVisible.value = false
    }).catch(() => {
      ElMessage.error({
        message: "验证失败",
        type: "warning",
        duration: 2000
      })
      // loginFormData.password = ""
    }).finally(() => {
      loading.value = false
    })
  })
}
// getHistoryQuestionListApi
function getHistoryQuestionList() {
  getHistoryQuestionListApi().then(({ data }) => {
    questionList.value = data
    console.log(questionList.value)
  })
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
const loginFormRules: FormRules = {
  account: [
    { required: true, message: "请输入用户名/账号", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
  ],
  code: [
  ]
}
</script>
<template>
  <div class="login-container">

    <Header :activeId="4" />
    <div class="ai w-1200" element-loading-text="Loading...">
      <div class="ai-left">
        <div class="ai-left-tool">
          <div class="ai-left-tool-item">
            <div class="icon icon1" style="height: 31px; width: 31px;"  @click="goToUrl('/ai')"/>
            <div class="title" @click="goToUrl('/ai')">
              推荐
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon2" style="height: 30px; width: 30px;"  @click="goToUrl('/ai2')"/>
            <div class="title" @click="goToUrl('/ai2')">
              问答
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon3" style="height: 32px; width: 30px;"   @click="goToUrl('/ai3')"/>
            <div class="title" @click="goToUrl('/ai3')">
              学习
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon5" style="height: 30px; width: 30px;" />
            <div class="title">
              专业工具
            </div>
          </div>
          <div class="ai-left-tool-item selected">
            <div class="icon icon6 iconSelected" style="height: 30px; width: 30px;"   @click="goToUrl('/ai4')"/>
            <div class="title titleSelected" @click="goToUrl('/ai4')">
              记录
            </div>
          </div>
          <div class="ai-left-tool-item">
            <div class="icon icon7" style="height: 30px; width: 30px;"   @click="goToUrl('/ai5')"/>
            <div class="title" @click="goToUrl('/ai5')" >
              指南
            </div>
          </div>
        </div>
        <div class="recode-class">
          <div class="title0">
            推荐记录：
          </div>
          <div class="content">
            <div class="item">
              <div class="commenttime">
                2025.04.16-19:38
              </div>
              <div class="desc">
                什么是SACA？
              </div>
            </div>
            <div class="item">
              <div class="commenttime">
                2025.04.16-19:45
              </div>
              <div class="desc">
                SACA搜索如何运作？
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ai-right scroll right-is-record">
        <div class="el-scrollbar" id="messageContainer1">
          <div class="content">
            <div class="title0">
              我的问答记录
            </div>
            <div class="item" v-if="questionList.length > 0" v-for="item in questionList">
              <div class="desc">
               {{item.content}}
              </div>
              <div class="commenttime">
                {{item.create_time.replace('-','.').replace('-','.').substring(0,16)}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style src="@/pages/ai/style/index4.css"  scoped></style>
<style lang="scss" scoped>

</style>

